<template>
  <view class="container">
    <!-- 顶部欢迎区域 -->
    <view class="welcome-section">
      <text class="welcome-text">欢迎使用</text>
      <text class="app-name">AI企业神经触点</text>
    </view>

    <!-- 已购买商品标题 -->
    <view class="section-title">
      <text>已购买商品</text>
    </view>

    <!-- 空状态 -->
    <view class="empty-state">
      <image 
        src="../../static/image/icon_back.png" 
        mode="aspectFit" 
        class="empty-image"
      />
      <text class="empty-text">暂无已购买商品</text>
    </view>

    <!-- 功能提示 -->
    <view class="swipe-hint">
      <uni-icons type="more" size="24" color="#999"></uni-icons>
      <text>左右滑动查看更多功能</text>
    </view>
  </view>
</template>

<script setup>
// 可在此处添加数据逻辑
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';

// 示例：获取已购商品数据
const purchasedItems = ref([]);

onLoad(() => {
  // 实际项目中替换为接口调用
  // fetchPurchasedItems();
});
</script>

<style scoped>
/* 全局容器 */
.container {
  padding: 24rpx;
  background: 
    linear-gradient(135deg, #0a0e17 0%, #1a1f2e 100%),
    repeating-linear-gradient(
      45deg,
      rgba(56, 182, 255, 0.05) 0px,
      rgba(56, 182, 255, 0.05) 2px,
      transparent 2px,
      transparent 4px
    );
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: #e0e0e0;
}

/* 欢迎区域 */
.welcome-section {
  margin-bottom: 40rpx;
  padding: 30rpx;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 16rpx;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(56, 182, 255, 0.2);
  box-shadow: 
    0 0 15px rgba(56, 182, 255, 0.1),
    inset 0 0 10px rgba(56, 182, 255, 0.05);
  transition: all 0.3s ease;
}

.welcome-section:hover {
  border-color: rgba(56, 182, 255, 0.4);
  box-shadow: 
    0 0 20px rgba(56, 182, 255, 0.2),
    inset 0 0 15px rgba(56, 182, 255, 0.1);
}

.welcome-text {
  display: block;
  font-size: 36rpx;
  color: #666;
  margin-bottom: 8rpx;
}

.app-name {
  display: block;
  font-size: 48rpx;
  font-weight: bold;
  background: linear-gradient(to right, #38b6ff, #00e5ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  text-shadow: 0 0 10px rgba(56, 182, 255, 0.5);
  animation: textGlow 2s ease-in-out infinite alternate;
}

@keyframes textGlow {
  from {
    text-shadow: 0 0 5px rgba(56, 182, 255, 0.3);
  }
  to {
    text-shadow: 0 0 15px rgba(56, 182, 255, 0.7);
  }
}

/* 分区标题 */
.section-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #38b6ff;
  padding: 20rpx 0;
  margin-bottom: 30rpx;
  display: flex;
  align-items: center;
  position: relative;
}

.section-title::before {
  content: "";
  display: inline-block;
  width: 8rpx;
  height: 32rpx;
  background: linear-gradient(to bottom, #38b6ff, #00e5ff);
  margin-right: 16rpx;
  border-radius: 4rpx;
  box-shadow: 0 0 8px rgba(56, 182, 255, 0.5);
}

.section-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(56, 182, 255, 0.5),
    transparent
  );
}

/* 空状态 */
.empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60rpx;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 16rpx;
  backdrop-filter: blur(5px);
  border: 1px solid rgba(56, 182, 255, 0.1);
  box-shadow: 
    0 0 20px rgba(56, 182, 255, 0.1),
    inset 0 0 15px rgba(56, 182, 255, 0.05);
  margin: 20rpx 0;
  transition: all 0.3s ease;
}

.empty-state:hover {
  border-color: rgba(56, 182, 255, 0.3);
  box-shadow: 
    0 0 30px rgba(56, 182, 255, 0.2),
    inset 0 0 20px rgba(56, 182, 255, 0.1);
}

.empty-image {
  width: 240rpx;
  height: 240rpx;
  margin-bottom: 30rpx;
  opacity: 0.6;
  transition: transform 0.3s ease;
}

.empty-image:active {
  transform: scale(0.95);
}

.empty-text {
  font-size: 30rpx;
  color: #999;
  margin-top: 20rpx;
}

/* 滑动提示 */
.swipe-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30rpx;
  color: #38b6ff;
  font-size: 26rpx;
  background: rgba(56, 182, 255, 0.1);
  border-radius: 16rpx;
  margin-top: 20rpx;
  border: 1px dashed rgba(56, 182, 255, 0.3);
  animation: pulse 2s infinite, borderGlow 3s ease-in-out infinite alternate;
}

@keyframes borderGlow {
  from {
    border-color: rgba(56, 182, 255, 0.3);
    box-shadow: 0 0 5px rgba(56, 182, 255, 0.1);
  }
  to {
    border-color: rgba(56, 182, 255, 0.6);
    box-shadow: 0 0 15px rgba(56, 182, 255, 0.3);
  }
}

.swipe-hint text {
  margin-left: 10rpx;
}

@keyframes pulse {
  0% { opacity: 0.8; }
  50% { opacity: 1; }
  100% { opacity: 0.8; }
}
</style>
